<template>
	<view class="container">
		<view class="header">
			<view class="topbox">
				<view class="left">
					<uni-icons class="rr-icons"  type="back" color="#fff" size="24"  @click="$goURl('/pages/index/index')"></uni-icons>
				</view>
				<view class="right" v-show="false">

				</view>
			</view>
			<view class="title">

			</view>
			<view class="timer"  v-for="(item,index) in data.list" :key="item.ID"  >
				<view class="flex"  v-if="data.current==item.ID">
					{{item.is_open==0?'距开始':'剩余时间'}}:
					<uni-countdown @timeup="timeup"  :show-day="false" :hour="item.sort[0]" :minute="item.sort[1]" :second="item.sort[2]" color="#FFFFFF" background-color="#000"/>
				</view>

			</view>
		</view>
			<view class="content">
				<scroll-view :scroll-x="true"  style="white-space: nowrap">
					<view class="tablist">
						<view class="item" :class="{active:data.current==item.ID}" v-for="(item,index) in data.list" :key="item.ID" @click="tabsChange(item.ID,index)">
							<text>{{item.start_time}}</text>
							<br>
							{{item.is_open==0?'未开抢':(item.is_open==1?'已开抢':'已结束')}}
						</view>
					</view>
				</scroll-view>

				<!-- <z-tabs ref="tabs" bar-width='0' bar-height='0' bg-color="#F4F6FA" :inactive-style="{'background-color':'#fff',color:'rgba(102, 102, 102, 1)',padding:'5upx 20upx','border-radius':'30upx'}" :active-style="{'background-color':'#FA301B',color:'#fff',padding:'5upx 20upx','border-radius':'30upx'}" :current="data.current" @change="tabsChange"   :list="data.tablist"></z-tabs> -->

				<scroll-view class='scroll' :scroll-y="true" >
				<view class="list">
					<view class="item" v-for="(item,index) in data.goodsList" :key="item.ID" @click="$goURl('/pages/commodity/seckill/seckillDetails?id='+item.ID)">
						<view class="image">
							<image :src="item.img" mode="aspectFill"></image>
						</view>
						<view class="goods">
							<view class="goodstitle textsl2">
								{{item.name}}
							</view>
							<view class="pricebox">
								<view class="price">
									<!-- 进度条 -->
									<view class="jdt">
										<view class="jdts" :style="{width:(item.stock-item.buy_number)/item.stock*100+'%'}">
											{{item.stock-item.buy_number}}件<image src="https://img.fubaozx.cn/static/oldImg/16978530813273.png" mode=""></image>
										</view>
									</view>
									<view class="price2">
										原价{{item.market}}
									</view>
									<view class="price1">
										￥{{item.money}}
									</view>
								</view>
								<view class="btns">
									<image class="bimg" src="https://img.fubaozx.cn/static/oldImg/16978559242236.png" mode=""></image>
									{{data.is_open==0?'未开始':(data.is_open==1?'抢购':'已结束')}}
								</view>
							</view>
						</view>
					</view>
					<empty v-if="data.goodsList.length==0"></empty>
				</view>
				</scroll-view>
			</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		is_open:0,
		current:0,
		list:[],
		page:1,
		size:10,
		goodsList:[],
		time:[0,0,0]
	})
	onLoad((option)=>{
		// killingSession()
		getTime()
	})
	onShow(()=>{
	})
	onPullDownRefresh(()=> {
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
	})

	function tabsChange(e,i){
		data.page=1
		data.current=e
		data.goodsList=[]
		getTime()
	}
	function timeup(e){

		if(data.list.filter(item=>{
			return item.ID==data.current
		})[0].is_open!=2){
			getTime()
		}

	}
	function update(e){
	}

	function getTime(){
		proxy.$request({
			url: `api/getTime/`,
			method: 'get',
			success(res) {
				let time=new Date(res.data)
				let y =time.getFullYear();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let today=y+'/'+m+'/'+d
				proxy.$request({
					url: `api/killingSession/?page=${1}&size=${20}`,
					method: 'get',
					success(res) {
						let list=res.data.data
						list.forEach(item=>{
							let startTime=new Date(today+' '+item.start_time).getTime()
							let endTime=new Date(today+' '+item.end_time).getTime()
							let times=time.getTime()
							let timer=''
							if(times<startTime){
								item.is_open=0
								timer = startTime-times
							}else if(times>=startTime&&times<endTime){
								item.is_open=1
								timer = endTime-times
							}else{
								item.is_open=2
							}
							if(times<endTime){
								let leave1 = timer % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
								let hours = Math.floor(leave1 / (3600 * 1000));
								let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
								let minutes = Math.floor(leave2 / (60 * 1000));
								let leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
								let seconds = Math.round(leave3 / 1000);
								item.sort=[hours,minutes,seconds]
							}else{
									item.sort=[0,0,0]
							}

						})
						data.list=list
						if(data.current==0){
							data.current=list[0].ID
							data.is_open=list[0].is_open
						}else{
							data.is_open=list.filter(item=>{
								return item.ID==data.current
							})[0].is_open
						}

						getGoods()
					}
				})
			}
		})
	}
	function killingSession(){
		proxy.$request({
			url: `api/killingSession/?page=${1}&size=${20}`,
			method: 'get',
			success(res) {
				data.list=res.data.data
				data.current=res.data.data[0].ID
				getGoods()
			}
		})
	}
	function getGoods(){
		proxy.$request({
			url: `api/killing/goods_list_all/${data.current}/?page=${data.page}&size=${data.size}`,
			method: 'get',
			success(res) {
				data.goodsList=res.data.data
			}
		})
	}
</script>

<style lang="scss">
	.jdt{
		width: 240upx;
		height: 12px;
		border-radius: 30upx;
		background-color: #FFE0D6;
		margin-bottom: 10upx;
		.jdts{
			height: 12px;
			background:linear-gradient(60deg,#FE2406,#FE2406) ;
			border-radius: 30upx;
			position:  relative;
			font-size: 8px;
			color: #F4F6FA;
			line-height: 12px;
			text-align: center;
			image{
				width: 18px;
				height: 18px;
				position: absolute;
				border-radius: 50%;
				left:calc(100% - 18px);
				top: -3px;
			}
		}
	}
	.container{
		// padding: 30upx 0;
		background-image: url('https://img.fubaozx.cn/static/oldImg/16978525414947.png');
		background-repeat: no-repeat;
		background-size: 100% 360upx;
		.header{
			width: 100%;
			height: 360upx;
			position: relative;
			.timer{
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				bottom: 10upx;
			}
			.topbox{
				display: flex;
				justify-content: space-between;
				padding-top: 44px;
				.left{
					background: rgba(0,0,0,0.4);
					border-radius:0 50% 50% 0;
					padding: 15upx;
					padding-left: 35upx;
				}
				.right{
					background: rgba(0,0,0,0.4);
					border-radius: 50%;
					padding: 15upx;
					margin-right: 20upx;
				}
			}
			.title{
				text-align: center;
				width: 100%;
				position: absolute;
				top: 255upx;
				font-size: 12px;
				color: #7A2000;
			}
			.list{
				width: calc(100% - 100upx);
				position: absolute;
				bottom: 0;
				margin: 0 30upx;
				padding: 20upx;
				background-color: #FFEEEC;
				border-radius: 30upx 30upx 0 0 ;
				z-index: 1;
				.items{
					display: flex;
					align-items: center;
					justify-content: space-between;
					image{
						width: 22px;
						height: 22px;
						border-radius: 50%;
						border: 1px solid #FE2406;
					}
					.titles{
						width: calc(100% - 30px);
						font-size: 12px;
						color: #A12F03;
					}
				}
			}
		}

			.content{
				padding-top: 30upx;
				.tablist{
					display: flex;
					padding: 10upx 0;
					.item{
						width: 84px !important;
						font-size: 12upx;
						text-align: center;
						padding: 10upx 10upx;
						margin:  0 10upx;
						text{
							font-size: 16px;
							font-weight: bold;
						}
					}
					.active{
						background-color: #fff;
						color: #FE2406;
						border-radius: 10upx;
						box-shadow: 0 2px 6px 1px rgba(254, 36, 6, 0.20);
					}
				}
				.scroll{
					height:calc(100vh - 600upx);
					background-color: #F4F6FA;
					border-radius: 30upx;
					z-index: 999;
				.list{
					padding: 0 30upx;
					.item{
						background-color: #fff;
						padding: 15upx;
						border-radius: 15upx;
						display: flex;
						position: relative;
						margin-bottom: 20upx;
						.tlimg{
							position: absolute;
							left: 0;
							top: 30upx;
							width: 60px;
							height: 19px;
							z-index: 9999;
						}
						.image{
							border-radius: 15upx;
							margin-right: 20upx;
							image{
								width: 110px;
								height: 110px;
								border-radius: 15upx;
							}
						}
						.goods{
							width: calc(100% - 110px - 20upx);
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.goodstitle{
								font-size: 16px;
								font-weight: bold;
							}
							.pricebox{
								display: flex;
								justify-content: space-between;
								align-items: center;
								.price{
									.price1{
										color: #FE2406;
										font-size: 13px;
									}
									.price2{
										color: #999;
										font-size: 12px;
										text-decoration: line-through;
									}
								}
								.btns{
									background: linear-gradient(to bottom,#FF521C,#FE2406);
									width: 35%;
									text-align: center;
									padding: 10upx 0;
									border-radius: 30upx;
									color: #fff;
									font-size: 13px;
									position: relative;
						box-shadow: 0 2px 6px 1px rgba(254, 36, 6, 0.20);
									.bimg{
										position: absolute;
										width: 14px;
										height: 34px;
										left: 0;
										top: -3px;
									}
								}
							}
						}
					}
				}
			}
		}

	}
</style>
<style>
	page{
		background-color: #F4F6FA;
	}
</style>
